//获取当前商品的id
    var idArr = location.search.match(/id=(\d+)/)
    if (idArr) {
        // 获取id
        var id = idArr[1];
        // 发送ajax获取商品详细信息
        // 获取标签
        var titleB = document.querySelector('.title');
        var priceB = document.querySelector('.price');
        var categoryB = document.querySelector('.category');
        var detail = document.querySelector('.detail');
        promiseAjax({
            url: "http://localhost:8888/goods/item",
            data: {
                id
            }
        }).then(res => {
            console.log(res);
            var { info: { title, price, category, goods_introduce } } = res;
            titleB.innerText = title
            priceB.innerText = price
            categoryB.innerText = category
            detail.innerHTML = goods_introduce
        })
    }
    else{
        alert("非法访问！！！")
        location.href = "list.html"
    }
    var userIdArr = location.search.match(/userid=(\d+)/)
    var token = location.search.match(/token=([^&]+)/)[1]
    document.querySelector('.shopping').setAttribute('href', "cars.html?id=" + userIdArr[1] + "&token=" + token)
    // 加入购物车
    var addBtn = document.querySelector('.addCart');
    addBtn.onclick = function () {
        if (userIdArr) {
            // 用户id
            var userid = userIdArr[1]
            // 商品id是上面的id
            promiseAjax({
                url: "http://localhost:8888/cart/add",
                method: "post",
                data: {
                    id: userid,
                    goodsId: id
                },
                headers: {
                    authorization: token,
                    "content-type": "application/x-www-form-urlencoded"
                }
            }).then(res => {
                console.log(res);
                alert("添加成功")
            })
        } else {
            alert("请先登录")
            location.href = "login.html"
        }
    }

    function Enlarge(classname){
        this.box = document.querySelector('.'+classname);
        this.middleBox = this.box.querySelector('.middleBox')
        this.bigBox = this.box.querySelector('.bigBox')
        this.middleImg = this.box.querySelector('.middleBox>img')
        this.bigImg = this.box.querySelector('.bigBox>img')
        this.mask = this.box.querySelector('.mask')
        this.smallImgs = this.box.querySelectorAll('.smallBox img')
}
// 绑定事件
Enlarge.prototype.bindEvent = function(){
    // tab切换
    for(let i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].onclick = ()=>{
            for(let j=0;j<this.smallImgs.length;j++){
                this.smallImgs[j].className = '';
            }
            this.smallImgs[i].className = 'active';
            // 换中图和大图
            this.middleImg.setAttribute('src',this.smallImgs[i].getAttribute('src'))

            this.bigImg.setAttribute('src',this.smallImgs[i].getAttribute('src'))
        }
    }

    // 移入
    this.middleBox.onmouseover = ()=>{
        this.mask.style.display = 'block';
        this.bigBox.style.display = 'block';
        // 移动
        this.middleBox.onmousemove = ()=>{
            var e = window.event;
            var x = e.pageX;
            var y = e.pageY;
            var l = x - this.mask.offsetWidth/2 - this.middleBox.offsetLeft;
            var t = y - this.mask.offsetHeight/2 - this.middleBox.offsetTop;
            if(l<0){
                l=0
            }
            if(t<0){
                t=0
            }
            if(l>this.middleBox.clientWidth-this.mask.offsetWidth){
                l = this.middleBox.clientWidth-this.mask.offsetWidth
            }
            if(t>this.middleBox.clientHeight-this.mask.offsetHeight){
                t = this.middleBox.clientHeight-this.mask.offsetHeight
            }
            this.mask.style.left = l + 'px'
            this.mask.style.top = t + 'px'

            // 计算大图移动
            var bigX = l/this.middleBox.clientWidth*this.bigImg.clientWidth
            var bigY = t/this.middleBox.clientHeight*this.bigImg.clientHeight
            this.bigImg.style.left = -bigX + 'px'
            this.bigImg.style.top = -bigY + 'px'
        }
    }
    this.middleBox.onmouseout = ()=>{
        this.mask.style.display = 'none';
        this.bigBox.style.display = 'none';
    }
}
var e = new Enlarge('enlarge')

e.bindEvent()